<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style media="screen">
      body {
        font: 12px sans-serif;
      }

      .flex-container {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
      }

      .flex-item {
        width: 850px;
        height: 450px;
      }
    </style>
  </head>
  <body>
    <h2>SWOOP : Swift x Objective-C Comparison Report</h2>
    <h4><%= title %></h4>

    <div class="flex-container">
      <div id="class_count" class="flex-item"></div>
      <div id="class_percentage" class="flex-item"></div>
    </div>

    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawCharts);

      function drawCharts() {
        drawClassCountChart();
        drawClassCountPercentage();
      }

      function drawClassCountChart() {
        var data = google.visualization.arrayToDataTable(<%= class_count_data %>);
        var options = {
          title: 'Classes Count',
          hAxis: {title: 'Version',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0},
          isStacked: true
        };
        var chart = new google.visualization.AreaChart(document.getElementById('class_count'));
        chart.draw(data, options);
      }

      function drawClassCountPercentage() {
        var data = google.visualization.arrayToDataTable(<%= class_percentage_data %>);
        var options = {
          title: 'Classes Percentage',
          hAxis: {title: 'Version',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0},
          isStacked: 'percent'
        };
        var chart = new google.visualization.AreaChart(document.getElementById('class_percentage'));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>
